<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.box1 {
				width: 200px;
				height: 200px;
				background-color: yellow;
			}
			.box2 {
				width: 100px;
				height: 100px;
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<fieldset id="">
			<legend>标题headline</legend>
			<!-- headline -->
			<h1>一级标签</h1>
			<h2>二级标签</h2>
			<h3>三级标签</h3>
			<h4>四级标签</h4>
			<h5>五级标签</h5>
			<h6>六级标签</h6>
		</fieldset>
		<fieldset id="">
			<!-- 语义 -->
			<legend>p标签 paragraph</legend>
			<p>地方hi花覅东侯坊is广佛公司广佛IGIO二个如果嘿嘿高i企鹅</p>
			<p>地方hi花覅东侯坊is广佛公司广佛IGIO二个如果嘿嘿高i企鹅</p>
		</fieldset>
		<fieldset id="">
			<legend>img标签</legend>
			<img width="100px" height="100px" src="img/1525490815187.jpg" >
		</fieldset>
		<fieldset id="">
			<legend>a超链接</legend>
			<a href="https://www.baidu.com/" target="_blank">跳转到百度</a>
		</fieldset>
		<fieldset id="">
			<legend>ul: unordered list 无序列表（集合）</legend>
			<ul>
				<li>北京</li>
				<li>上海</li>
				<li>深圳</li>
				<li>广州</li>
				<li>山东</li>
			</ul>
		</fieldset>
		<fieldset id="">
			<legend>div/span</legend>
			<!-- 
			div是块级元素：h、ul、ol、p
			1、独占一行
			2、可以设置宽和高
			3、不设置宽和高，默认的宽度是父容器的100%，高度是0
			-->
			<div style="width: 100px;height: 100px;background-color: red;"></div>
			<div class="box1"></div>
			<!-- 
			span是行内元素 a、input
			1、可以和其他行内元素并排
			2、不能设置宽和高
			3、默认的宽和高是里面内容的宽度和高度
			-->
			<span class="box2">SpanSpan</span>
			<a href="">超链接</a>
			<!-- 写网站页面最关键的点就是：如何让块级元素原有可以设置宽和高的情况下，可以左右排列 -->
		</fieldset>
		<fieldset id="">
			<legend>table表格</legend>
			<!-- width="400px"  width="70%"宽度占父容器的70%-->
			<table border="1" width="70%" cellspacing="0">
				<tr>
					<th>讲师名称</th>
					<th>所在班级</th>
				</tr>
				<!-- List<Teacher> list; 
					for (Teacher teacher : list) {
						<tr>
							<td>teacher.getName()</td>
							<td>teacher.getBanjiName()</td>
						</tr>
					}
				-->
				<tr>
					<td>高老师</td>
					<td>Java</td>
				</tr>
				<tr>
					<td>李老师</td>
					<td>UI</td>
				</tr>
				<tr>
					<td>赵老师</td>
					<td>H5</td>
				</tr>
			</table>
			
		</fieldset>
		
		<fieldset id="">
			<legend>form表单</legend>
			<form action="http://www.baidu.com">
				<table border="1" cellspacing="0">
					<tr>
						<td>用户名：</td>
						<td><input maxlength=""  type="text" name="name"/></td>
					</tr>
					<tr>
						<td>密码：</td>
						<td><input type="password" name="password"/></td>
					</tr>
					<tr>
						<td>性别：</td>
						<td>
							<input type="radio" name="gender"/>男
							<input type="radio" name="gender"/>女
							<input type="radio" name="gender"/>未知
						</td>
					</tr>
					<tr>
						<td>城市：</td>
						<td>
							<select name="city">
								<option>北京</option>
								<option>上海</option>
								<option>深圳</option>
								<option>广州</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>
							<!-- <button></button> -->
							<input type="submit" value="提交"/>
						</td>
						<td>
							<input type="reset" value="重置"/>
						</td>
					</tr>
				</table>
			</form>
			
		</fieldset>
	</body>
</html>
